<template>
	<view class="wallet-box-list">
		<!-- <view class="top-bg"></view> -->
		<!-- <view class="wb-box">
      <view class="wb-left"
        ><u-tabs
          :list="list1"
          lineWidth="30"
          lineColor="#fff"
          :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1)',
          }"
          :inactiveStyle="{
            color: '#eee',
            transform: 'scale(1)',
          }"
          :current="currentTab"
          itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
          @change="changeTab"
        ></u-tabs
      ></view>
      <view class="wb-right" @click="showDateFun">
        <text class="wb-time" v-if="currentTab === 0"> {{ currentDate }} </text>
        <text class="wb-time" v-if="currentTab === 1">
          {{ currentDate1.substring(5) + "至" + currentDate2.substring(5) }}
        </text>
        <text class="wb-time" v-if="currentTab === 2">
          {{ currentDate3 }}
        </text>
        <u-icon name="calendar" color="#eee"></u-icon>
      </view>
    </view> -->
		<!-- <view class="top-item">
      <view class="c-tab">
        <u-grid :border="false" col="2">
          <u-grid-item>
            <text class="grid-text1">总收入(元)</text>
            <text class="grid-text3 red">{{ walletInfo.incomeFee || 0 }}</text>
          </u-grid-item>
          <u-grid-item>
            <text class="grid-text1">总支出(元)</text>
            <text class="grid-text3 green">{{
              walletInfo.reduceFee || 0
            }}</text>
          </u-grid-item>
        </u-grid>
      </view>
    </view> -->

		<view class="tab-box">
			<view @click="tabFun('1')" :class="tabIndex === '1' ? 'active tab-1' : 'tab-1'">收入</view>
			<view @click="tabFun('2')" :class="tabIndex === '2' ? 'active tab-1' : 'tab-1'">支出</view>
		</view>
		<view class="text-area">
			<view class="item">
				<!--  <view class="u-slot-title1">
          <view class="left bold">{{ item.itemName || "--" }}</view>
        </view>
        <view class="u-slot-title1 line">
          <view class="left"
            ><text class="gery">总订单：</text>{{ item.counts || "0" }}
          </view>
          <view class="right tips2"
            ><text class="gery">总金额：</text>{{ item.totalAmount || "0" }}
          </view>
        </view> -->
				<view class="u-slot-title1 line" v-for="(item,index) in moneyList" :key="index">
					<view class="li-top">
						<view class="center"><text class="gery">时间：</text>{{item.createTime}}
						</view>
						<view class="right"><text class="gery">数量：</text>{{item.amount}}
						</view>
					</view>
					<view class="li-top">
						<view class="center"><text class="gery">关联单号：</text>{{item. tradeNo}}
						</view>
						<view class="right"><text class="gery">业务类型：</text>{{getbizType(item.bizType)}}
						</view>
					</view>
					<!-- <u-icon name="arrow-right"></u-icon> -->
				</view>
				<!-- <view class="mu-remark" v-if="item.remark">
          {{ item.remark }}
        </view> -->
			</view>
		</view>
		<!-- <view class="text-area" v-else>
      <view
        class="item"
        v-for="(item, index) in walletInfo.reduceVOs"
        :key="index"
      >
        <view class="u-slot-title1">
          <view class="left bold">{{ item.itemName || "--" }}</view>
        </view>
        <view class="u-slot-title1 line">
          <view class="left"
            ><text class="gery">总订单：</text>{{ item.counts || "0" }}
          </view>
          <view class="right tips2"
            ><text class="gery">总金额：</text>{{ item.totalAmount || "0" }}
          </view>
        </view>
        <view
          v-for="(i, ind) in item.list"
          :key="ind"
          class="u-slot-title1 line"
          @click="
            toPage(
              '/pages/user/my-wallet-detail?name=' +
                i.itemName +
                '&queryType=' +
                i.queryType +
                '&endTime=' +
                endTime +
                '&startTime=' +
                startTime
            )
          "
        >
          <view class="left">{{ i.itemName || "--" }} </view>
          <view class="center"
            ><text class="gery">订单：</text>{{ i.counts || "0" }}
          </view>
          <view class="right"
            ><text class="gery">金额：</text>{{ i.totalAmount || "0" }}
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view> -->
		<!-- <view class="mu-remark" v-if="item.remark">
          {{ item.remark }}
        </view> -->
		<!-- </view> -->

		<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
			:nomore-text="nomoreText" />
		<!-- <u-datetime-picker
      :show="showDate"
      :maxDate="maxDate"
      :minDate="minDate"
      v-model="currentDateNew"
      :mode="mode1"
      @confirm="confirmTime"
      @cancel="showDate = false"
    ></u-datetime-picker> -->
	</view>
</template>

<script>
	import {
		httpPost,
		lastDayFun,
		weekDay,
		getStoreData
	} from "@/utils/http.js";
	const img1 = require(`@/img/my/bank-icon.png`);
	const img2 = require(`@/img/my/oll-tab-bar.png`);
	export default {
		data() {
			return {
				mode1: "date",
				tabIndex: "1",
				currentDateNew: "",
				currentDate1: "",
				currentDate2: "",
				currentDate3: "",
				currentDate4: "",
				currentTab: 0,
				endTime: "",
				startTime: "",
				maxDate: new Date().getTime(),
				minDate: new Date().getTime() - 5 * 365 * 24 * 60 * 60 * 1000,
				showDate: false,
				showDate1: false,
				currentDate: "",
				img1,
				img2,
				walletInfo: {},
				cashFee: "",
				list1: [{
					name: "按日"
				}, {
					name: "按周"
				}, {
					name: "按月"
				}],
				pageNo: 1,
				status: "loadmore",
				loadingText: "努力加载中",
				loadmoreText: "",
				nomoreText: "",
				lastPageNo: 0, //当前一页的数据条数
				moneyList: []
			};
		},
		onShow() {
			// this.currentDate = lastDayFun();
			// this.currentDateNew = new Date().getTime();
			this.walletArrFun("IN");
		},
		onReachBottom() {
			if (this.lastPageNo >= 10) {
				this.status = "loading";
				this.pageNo++;
				this.getdataFun();
			} else {
				this.status = "nomore";
			}
		},
		methods: {
			tabFun(index) {
				this.tabIndex = index;
				let type = "IN";
				if (index == "1") {
					type = "IN";
				}
				if (index == "2") {
					type = "OUT";
				}
				this.walletArrFun(type);
			},
			getbizType(type) {
				let val = Number(type);
				let typeText = "";
				switch (val) {
					case 1:
						typeText = "让利分红积分";
						break;
					case 2:
						typeText = "让利补贴积分";
						break;
					case 3:
						typeText = "传统补贴积分";
						break;
					case 4:
						typeText = "消费者共享金";
						break;
					case 5:
						typeText = "商家共享金";
						break;
					case 6:
						typeText = "消费者加速积分";
						break;
					case 7:
						typeText = "商家加速积分";
						break;
					case 8:
						typeText = "排队分润金";
						break;
					case 9:
						typeText = "盈利共享分润";
						break;
					case 10:
						typeText = "贡献奖励"; //服务商直推会员贡献奖励
						break;
					case 11:
						typeText = "贡献奖励"; //服务商推荐商家会员跨界贡献奖励
						break;
					case 12:
						typeText = "服务商分润-让利订单";
						break;
					case 13:
						typeText = "服务商分润-商家粉丝跨界";
						break;
					case 14:
						typeText = "服务商分润-让利业绩极差";
						break;
					case 15:
						typeText = "服务商分润-直推奖励";
						break;
					case 16:
						typeText = "代理商分润-让利订单";
						break;
					case 17:
						typeText = "公司分润-让利订单";
						break;
					case 18:
						typeText = "合伙人分润";
						break;
					case 20:
						typeText = "抵消分红积分";
						break;
					case 21:
						typeText = "冻结分红积分";
						break;
					case 22:
						typeText = "扣减共享金";
						break;
					case 23:
						typeText = "服务商分润-传统订单";
						break;
					case 24:
						typeText = "代理商分润-传统订单";
						break;
					case 25:
						typeText = "公司分润-传统订单";
						break;
					case 26:
						typeText = "商家共享分润-传统订单";
						break;
					case 51:
						typeText = "线下消费";
						break;
					case 52:
						typeText = "线上消费";
						break;
					case 53:
						typeText = "提现";
						break;
					case 54:
						typeText = "消费退款";
						break;
					default:
						typeText
						break;
				}
				return typeText
			},
			// confirmTime(e) {
			// 	this.currentDateNew = e.value;
			// 	this.showDate = false;
			// 	this.tabIndex = "1";
			// 	if (this.currentTab === 0) {
			// 		this.currentDate = lastDayFun("", "", e.value);
			// 	} else if (this.currentTab === 1) {
			// 		const arr = weekDay(e.value);
			// 		this.currentDate1 = arr[0];
			// 		this.currentDate2 = arr[1];
			// 	} else {
			// 		const day = lastDayFun("", e.value); //获取改月的最后一日的 年月日
			// 		this.currentDate3 = day.substring(0, 7);
			// 		this.currentDate4 = day;
			// 	}
			// 	this.walletArrFun();
			// },
			// changeTab(e) {
			// 	const index = e.index;
			// 	this.currentTab = index;
			// 	this.tabIndex = "1";
			// 	if (index === 0) {
			// 		this.currentDate = lastDayFun();
			// 		this.currentDateNew = new Date(this.currentDate).getTime();
			// 	} else if (index === 1) {
			// 		const arr = weekDay();
			// 		this.currentDate1 = arr[0];
			// 		this.currentDate2 = arr[1];
			// 		this.currentDateNew = new Date(this.currentDate1).getTime();
			// 	} else {
			// 		const day = lastDayFun();
			// 		this.currentDate3 = day.substring(0, 7);
			// 		this.currentDate4 = day;
			// 		this.currentDateNew = new Date(this.currentDate4).getTime();
			// 	}
			// 	this.walletArrFun();
			// },
			// showDateFun() {
			// 	if (this.currentTab === 0) {
			// 		this.mode1 = "date";
			// 	} else if (this.currentTab === 1) {
			// 		this.mode1 = "date";
			// 	} else {
			// 		this.mode1 = "year-month";
			// 	}
			// 	this.showDate = true;
			// },
			// toPage(v) {
			// 	uni.navigateTo({
			// 		url: v,
			// 	});
			// },
			walletArrFun(type) {
				const _this = this;
				// let endTime = "";
				// let startTime = "";
				// if (this.currentTab === 0) {
				//   endTime = this.currentDate + " 23:59:59";
				//   startTime = this.currentDate + " 00:00:00";
				// } else if (this.currentTab === 1) {
				//   endTime = this.currentDate2 + " 23:59:59";
				//   startTime = this.currentDate1 + " 00:00:00";
				// } else {
				//   endTime = this.currentDate4 + " 23:59:59";
				//   startTime = this.currentDate3 + "-01 00:00:00";
				// }
				// this.endTime = endTime;
				// this.startTime = startTime;
				httpPost("/api/union/store/walletLogList", {
						pageNo: _this.pageNo,
						pageSize: 10,
						direction: type
					})
					.then((res) => {
						_this.lastPageNo = res.data.list.length;
						_this.moneyList = [..._this.moneyList, ...res.data.list];
						if (_this.lastPageNo >= 10) {
							_this.status = "loading";
							_this.nomoreText = "";
						} else {
							_this.status = "nomore";
							_this.nomoreText = "没有更多了";
						}
					})
					.catch((e) => {
						//
					});
			},
		},
	};
</script>
<style lang="scss">
	.wallet-box-list {
		background: #f2f2f2;
		padding-top: 20rpx;
		min-height: calc(100vh - 20rpx);

		.text-area {
			.item {
				margin-top: 20rpx;

				.mu-remark {
					padding: 8px 0 12px 0;
					color: #f00;
				}

				.bold {
					font-size: 15px;
					font-weight: bold;
				}

				.gery {
					color: #999;
				}

				.u-slot-title1 {
					// display: flex;

					// .left {
					// 	width: 35%;
					// }

					// .center {
					// 	width: 25%;
					// }

					// .right {
					// 	flex: 1;
					// }

					&:not(:last-child) {
						&.line {
							border-bottom: 1px solid #eee;
						}
					}
				}
			}

			.u-slot-title1 {
				// display: flex;
				// flex-direction: row;
				// justify-content: space-between;
				// line-height: 40px;
				background: #fff;
				margin: 0 16px 16px;
				padding: 6px 16px;
				border-radius: 4px;
				font-size: 12px;
				color: #333;

				.li-top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.li-top:nth-child(1) {
					margin-bottom: 20rpx;
				}
			}
		}

		.tab-box {
			display: flex;
			margin: 0 16px;
			font-size: 15px;

			.tab-1 {
				width: 88px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				color: #333;

				&.active {
					border-radius: 20px;
					color: #fff;
					background: linear-gradient(90deg, #3cbaf6, #56d1fc);
				}
			}
		}

		.wb-box {
			display: flex;
			margin: -84px 16px 10px 16px;
			justify-content: space-between;
			align-items: center;
		}

		.wb-right {
			display: flex;
			font-size: 14px;
			color: #eee;
			border-radius: 4px;
			background: rgba(255, 255, 255, 0.2);
			padding: 2px 12px;

			/deep/.u-icon {
				padding-left: 6px;
			}

			.wb-time {
				font-size: 13px;
				padding-right: 12px;
				border-right: 1px solid rgb(233, 230, 230);
			}
		}

		.item-box {
			padding-bottom: 24px;
		}

		.top-bg {
			width: 100%;
			height: 100px;
			background: #2998f8;
			background: -webkit-linear-gradient(#2998f8, #f2f2f2);
		}

		.top-item {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			width: calc(100vw - 32px);
			margin: 16px 16px 10px 16px;
			align-items: center;
			padding: 20px 0;
			background: #ffffff;
			box-shadow: 0px 0px 6px 0px rgba(79, 79, 79, 0.1);
			border-radius: 20px;

			.title2 {
				margin-top: 4px;
				margin-bottom: 24px;
				font-size: 18px;
				color: #333;
			}

			.c-tab {
				border-top: 1px solid #eee;
				width: 100%;
				font-size: 16px;

				.grid-text1 {
					margin-top: 16px;
					font-size: 14px;
					color: #666;
				}

				.grid-text3 {
					margin: 6px 0 0 0;
					color: #333;

					&.red {
						color: #f00;
					}

					&.green {
						color: rgb(6, 199, 6);
					}
				}
			}
		}

		.box {
			width: 100%;
			margin-top: 8px;
			color: #333;

			.item {
				display: flex;
				align-items: center;

				.tx {
					margin-left: 12px;
				}
			}

			.box1 {
				background: #fff;
				padding: 6px 12px;
				border-radius: 4px;
				margin: 16px 16px 0 16px;
				display: flex;
				height: 44px;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>